<!doctype html>
<html lang="en">
<head>
    <title>Grid - Data Types</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css"/>
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid( {
                allowSorting: true,
                columns: [
                    {},
                    { dataType: "currency" },
                    { dataType: "number" },
                    { dataType: "number", dataFormatString: "p0" },
                    { dataType: "boolean" }
                ]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Data Types</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
                <thead>
                    <tr>
                        <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td>
                    </tr>
                </tbody>
            </table>
            <h4>Original Data</h4>
            <table id="demo1">
                <thead>
                    <tr>
                        <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td>
                    </tr>
                </tbody>
            </table>

            <!-- End demo markup -->
            <div class="demo-options">
            <!-- Begin options markup -->
                
            <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
               In this sample, the wijgrid widget shows the same data as in the Original Data grid, but the column data types in the wijgrid are explicitly specified: 
            </p>
                <ul>
                    <li>ProductID: <b>dataType</b> = &quot;string&quot;</li>
                    <li>UnitPrice: <b>dataType</b> = &quot;currency&quot;</li>
                    <li>Quantity: <b>dataType</b> = &quot;number&quot;</li>
                    <li>Discount: <b>dataType</b> = &quot;number&quot;, <b>dataFormatString</b> = &quot;p0&quot;</li>
                    <li>Discontinued: <b>dataType</b> = &quot;boolean&quot;</li>
                </ul>
                <p>
                Try to sort the UnitPrice column in both grids to see a difference.</p>
        </div>
    </div>
</body>
</html>
